/**
 * Created by guiyongdong on 2017/7/6.
 */
import React, {Component} from 'react';
import ExampleData from './ExampleData';
import './ExampleDetail.css';
import Utils from '../Utils';

export default class ExampleDetail extends Component {
    render() {

        let str = this.props.location.pathname+"";
        let array = str.split('/');
        let index = Number.parseInt(array[array.length-1]);
        let data = ExampleData[index];

        let style = {};
        if (Utils.IsPhone()) {
            style = {width:"100%", marginTop:10};
        }else {
            style = {width:(document.body.clientWidth-40-50)/4, marginTop:10, marginLeft:5};
        }
        let images = [];
        for(let i=0; i<data.imageArray.length;i++) {
            images.push(
                <div style={style} key={i}>
                    <img src={data.imageArray[i]}  width="100%"/>
                </div>

            );
        }

        return(
            <div className="ExampleDetail">
                <div className="ExampleHead">
                    <p style={{fontSize:25, color:"#464646",marginTop:30}}>案例展示</p>
                    <p style={{fontSize:15, color:"#828282",marginTop:5,marginBottom:30}}>用心做好每一款APP！</p>
                </div>
                <div className="ExampleDetailView">
                    <h1 style={{marginBottom:10}}>{data.title}</h1>
                    <h3>{data.desc}</h3>

                    <div className="ExampleDetailImageBg">
                        {images}
                    </div>
                </div>

            </div>
        )
    }
}